import React, { useState } from 'react'
import './Items.css'
import { Info } from './Info/Info'
import { Detail } from './Detail/Detail'
import { EditButton } from './EditButton/EditButton'
import { JDYConfirm } from '../UI/JDYConfirm/JDYConfirm'

export const Items = (props) => {
  const [showConfirm, setShowConfirm] = useState(false);
  const deleteInfoHandle = () => {
    setShowConfirm(true)
  }
  const cancleHandle = () => {
    setShowConfirm(false)
  }
  const confirmHandle = () => {
    setShowConfirm(false)
    props.deleteInfo(props.dataIndex)
  }

  return (
    <div className="item">
        <Info info={props.info}></Info>
        <Detail></Detail>
        <EditButton></EditButton>
        <div className='del-btn' onClick={deleteInfoHandle}>删除</div>
        {showConfirm && <JDYConfirm confirmText={"确定删除吗？"} cancleHandle={cancleHandle} confirmHandle={confirmHandle}></JDYConfirm>}
    </div>
  )
}
